<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/11/2
  Time: 21:19
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="${pageContext.request.contextPath}/assets/images/favicon.png" type="image/png">
    <title>资源列表</title>

    <!--Begin  Page Level  CSS -->
    <link href="${pageContext.request.contextPath}/assets/plugins/morris-chart/morris.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/plugins/jquery-ui/jquery-ui.min.css" rel="stylesheet"/>
    <!--End  Page Level  CSS -->
    <link href="${pageContext.request.contextPath}/assets/css/icons.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/bootstrap.min.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/style.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/assets/css/responsive.css" rel="stylesheet">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .main-content {
            background-color: #ffffff;
        }


        tr td a {
            margin-right: 10px;
        }


        input {
            /*text-indent: 20px;*/
            width: 200px;
            -webkit-appearance: none;
            background-color: #fff;
            background-image: none;
            border-radius: 4px;
            border: 1px solid #dcdfe6;
            box-sizing: border-box;
            color: #525255;
            display: inline-block;
            font-size: inherit;
            height: 40px;
            line-height: 40px;
            outline: 0;
            padding: 0;
            transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
        }

        select {
            width: 173px;
            background-color: #fff;
            background-image: none;
            border-radius: 4px;
            border: 1px solid #dcdfe6;
            box-sizing: border-box;
            color: #848689;
            display: inline-block;
            font-size: inherit;
            height: 40px;
            line-height: 40px;
            outline: 0;
            padding: 0 15px;
            transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
        }

        .insert {
            top: 14px;
            position: absolute;
            right: 15px;
        }

        .resource {
            top: 14px;
            position: absolute;
            right: 75px;
        }

        .title-right {
            position: relative;
        }

        .title-left {
            background-color: white;
            padding: 0 20px;
        }

        .container-fluid {
            background-color: white;
        }

        .insertBox {
            text-align: center;
        }

        .layui-form-item {
            margin: 15px;
        }

        .insertBox-right {
            float: right;
        }

        .wrapper > table > thead > tr > th {
            height: 60px;
            text-align: center;
            vertical-align: middle;
        }

        .wrapper .table tbody tr td {
            line-height: 60px;
        }

        textarea {
            text-indent: 2px;
            padding: 5px;
        }

        textarea:focus {
            outline-style: none;
        }

        #page {
            text-align: center;
            width: 34px;
            height: 34px;
        }

        #select_pageSize {
            width: 110px;
            height: 34px;
        }

        .input {
            display: inline-block;
            width: 20%;
            height: 34px;
            padding: 6px 0px;
            font-size: 14px;
            line-height: 1.42857143;
            color: #555;
            background-color: #fff;
            background-image: none;
            border: 1px solid #ccc;
            border-radius: 4px;
            -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
            box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
            -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
            -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
            transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s
        }

        .input:focus {
            outline: #0e90d2;
        }
        .toPage {
            display: inline-block;
            /*border-top-left-radius: .3rem;*/
            /*padding: .85rem 1.5rem;*/
            font-size: 1.25rem;
            height: 34px;
            margin-left: -1px;
            line-height: 1.25;
            /*background-color: #fff;*/
            border: 1px solid #dee2e6;
            /*border-bottom-left-radius: .3rem;*/
            width: 34px;
            text-align: center;
        }

        .toPage[type=text]:focus {
            outline: 0;
            box-shadow: 0 0 0 .0rem rgba(0, 123, 255, .25)
        }

        button{
            outline: none !important;
        }

        .wrapper div {
            background-color: white;
        }

        .wrapper {
            background-color: #eee;
        }
    </style>
</head>

<body class="sticky-header">
<jsp:include page="../inc/left.jsp"/>
<div class="main-content" id="main-content">
    <jsp:include page="../inc/header.jsp"/>
    <!--body wrapper start-->
    <div class="wrapper">

        <!--Start Page Title-->
        <div class="page-title-box">
            <h4 class="page-title" style="text-indent: 1em">资源列表</h4>(陈奎)
            <ol class="breadcrumb">
                <li>
                    <a href="${pageContext.request.contextPath}/index">首页</a>
                </li>
                <li>
                    <a href="${pageContext.request.contextPath}/permissions/admin">权限</a>
                </li>
                <li class="active">
                    资源列表
                </li>
            </ol>
            <div class="clearfix"></div>
        </div>


        <%--资源列表查询框--%>
        <div class="container-fluid"
             style="margin-top: 20px;margin-bottom: 20px;  border:solid 1px rgba(0,0,0,0.2);padding:10px 20px 30px 10px">
            <div style="margin-bottom: 20px">
                <span style="font-size: 18px;color:#2b2b2b;"><i class="fa fa-search"></i>筛选搜索</span>
            </div>
            <form action="${pageContext.request.contextPath}/permissions/resource"
                  style="margin-top: 10px;text-indent: 2em">
                <div style="position: relative;top:-40px">
                    <button class="btn btn-primary" style="float: right;margin-left: 5px;outline: none">查询搜索</button>
                    <button class="btn " style="float: right;" id="clear">重置</button>
                </div>
                <label for="input1">资源名称：</label>
                <input id="input1" placeholder=" 资源名称" name="name" value="${param.name}"
                       class="input">
                <label for="input2">资源名称：</label>
                <input id="input2" placeholder=" 资源路径" name="url" value="${param.url}"
                       class="input">
                <label for="input2">资源分类：</label>
                <select class="input" name="categoryId" id="select1">
                    <option selected value="">全部</option>
                    <c:forEach items="${categoryList}" var="c">
                        <c:choose>
                            <c:when test="${c.id==param.categoryId}">
                                <option value="${c.id}" selected>${c.name}</option>
                            </c:when>
                            <c:otherwise>
                                <option value="${c.id}">${c.name}</option>
                            </c:otherwise>
                        </c:choose>
                    </c:forEach>
                </select>
            </form>
        </div>
        <%--资源列表查询框结束--%>

        <div class="container-fluid title-right title-left"
             style="margin-top: 20px;margin-bottom: 20px;  border:solid 1px rgba(0,0,0,0.2);padding: 20px">
            <span style="color: #100E0EC8;font-size: 18px;"><i class="fa fa-file-text-o"></i> 数据列表</span>
            <button class="btn btn-info" style="float: right;outline: none;margin-left: 5px" id="insert">添加</button>
            <button class="btn btn-primary" style="float: right;outline: none" onclick="resourceCategory()">资源分类
            </button>
        </div>

        <div>

            <table class="table table-bordered container-fluid" style="font-size: 15px">
                <thead>
                <tr>
                    <th>编号</th>
                    <th>资源名称</th>
                    <th>资源路径</th>
                    <th>描述</th>
                    <th>添加时间</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody style="text-align: center">
                <c:forEach items="${pageInfo.list}" var="r">
                    <tr>
                        <td>${r.id}</td>
                        <td>${r.name}</td>
                        <td>${r.url}</td>
                        <td>${r.description}</td>
                        <td><fmt:formatDate value="${r.createTime}" pattern="yyyy-MM-dd HH:mm:ss"/></td>
                        <td>
                            <button class="btn btn-primary" style="outline: none !important;"
                                    onclick="updateResources(${r.id})">编辑
                            </button>
                            <button class="btn btn-danger" style="outline: none !important;"
                                    onclick="deleteResource(${r.id})">删除
                            </button>
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
            <!--分页开始-->
            <nav aria-label="...">
                <ul class="pagination">
                    <span id="current" hidden>${pageInfo.pageNum}</span>
                    <span id="currentLimit" hidden>${pageInfo.pageSize}</span>
                    <li class="page-item disabled" style="border-color:white">
                        <span class="page-link" href="${pageContext.request.contextPath}/#">共${pageInfo.total}条数据</span>
                    </li>
                    <li style="float: left" class="page-item">
                        <select id="select_pageSize" name="pageSize" class="selectC">
                            <option value="10" ${pageInfo.pageSize==10?"selected":""}>10条/页</a></option>
                            <option value="12" ${pageInfo.pageSize==12?"selected":""}>12条/页</option>
                            <option value="14" ${pageInfo.pageSize==14?"selected":""}>14条/页</option>
                            <option value="16" ${pageInfo.pageSize==16?"selected":""}>16条/页</option>
                        </select>
                    </li>
                    <li class="page-item ${pageInfo.pageNum==1?"disabled":""}">
                        <a class="page-link" ${pageInfo.pageNum==1?"href=''":""}
                           href="${pageContext.request.contextPath}/permissions/resource?pageNum=${pageInfo.prePage}&name=${param.name}&url=${param.url}&categoryId=${param.categoryId}">上一页</a>
                    </li>
                    <li class="page-item ${pageInfo.pageNum==1?"active":""}">
                        <a class="page-link"
                           href="${pageContext.request.contextPath}/permissions/resource?page=1&pageSize=${pageInfo.pageSize}&name=${param.name}&url=${param.url}&categoryId=${param.categoryId}">1</a>
                    </li>

                    <c:if test="${pageInfo.pageNum>2}">
                        <li class="page-item disabled">
                            <a class="page-link" href="#">...</a>
                        </li>
                    </c:if>

                    <c:if test="${pageInfo.pageNum>1&&pageInfo.pageNum<pageInfo.pages}">
                        <li class="page-item ${(pageInfo.pageNum>1&&pageInfo.pageNum<pageInfo.pages)?"active":""}">
                            <span class="page-link">${pageInfo.pageNum}</span>
                        </li>
                    </c:if>

                    <c:if test="${pageInfo.pageNum<pageInfo.pages-1}">
                        <li class="page-item disabled ">
                            <a class="page-link" href="#">...</a>
                        </li>
                    </c:if>

                    <c:if test="${pageInfo.pages>1}">
                        <li class="page-item ${pageInfo.pageNum==pageInfo.pages?"active":""}">
                            <a id="cntpage" class="page-link "
                               href="${pageContext.request.contextPath}/permissions/resource?pageNum=${pageInfo.pages}&pageSize=${pageInfo.pageSize}&name=${param.name}&url=${param.url}&categoryId=${param.categoryId}">${pageInfo.pages}</a>
                        </li>
                    </c:if>
                    <li class="page-item ${pageInfo.isLastPage?"disabled":""} ">
                        <a class="page-link" ${pageInfo.isLastPage?"href=''":""}
                           href="${pageContext.request.contextPath}/permissions/resource?pageNum=${pageInfo.nextPage}&pageSize=${pageInfo.pageSize}&name=${param.name}&url=${param.url}&categoryId=${param.categoryId}">下一页</a>
                    </li>

                    <li class="page-item">
                        <span class="disabled" >前往</span>
                        <input id="page" type="text" class="toPage" style="float:left;" name="pageNum">
                        <span class="disabled">页</span>
                    </li>

                </ul>
            </nav>
            </nav>
        </div>
    </div>
        <!--分页结束-->
        <jsp:include page="../inc/footer.jsp"/>


    <div id="add-main" style="display: none;">
        <div class="insertBox">
            <form class="layui-form" id="add-form" action="insertResources" method="post">
                <div class="layui-form-item center">
                    <div class="layui-input-block">
                        <label class="layui-form-label" style="width: 100px">资源名称：</label>
                        <input type="text" name="name" required placeholder="请输入配置名称" id="resourceName"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <label class="layui-form-label" style="width: 100px">资源路径：</label>
                        <input type="text" name="url" required placeholder="请输入配置类型" id="resourceUrl"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <label class="layui-form-label" style="width: 100px">资源分类&emsp;</label>
                        <select name="categoryId" id="select2" style="width: 200px">
                            <c:forEach items="${categoryList}" var="c">
                                <option value="${c.id}" name="categoryId">${c.name}</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <label class="layui-form-label" style="width: 100px">资源描述：</label>
                        <textarea type="text" name="description" required
                                  style="width: 200px;height: 55px"></textarea>
                    </div>
                </div>
                <div class="layui-form-item insertBox-right">
                    <div class="layui-input-block">
                        <button class="btn btn-success" type="submit">确定</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div id="edit-main" style="display: none;">
        <div class="insertBox">
            <form class="layui-form" action="${pageContext.request.contextPath}/permissions/updateResources"
                  method="post">
                <input style="display: none" id="updateResourcesId" name="id"></input>
                <div class="layui-form-item center">
                    <div class="layui-input-block">
                        <label class="layui-form-label" style="width: 100px">资源名称：</label>
                        <input type="text" id="nameS" name="name" required placeholder="请输入配置名称"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <label class="layui-form-label" style="width: 100px">资源路径：</label>
                        <input type="text" id="urlS" name="url" required placeholder="请输入配置类型"
                               class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <label class="layui-form-label" style="width: 100px">资源分类&emsp;</label>
                        <select name="categoryId" id="select3" style="width: 200px">
                            <c:forEach items="${categoryList}" var="c">
                                <option value="${c.id}">${c.name}</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <label class="layui-form-label" style="width: 100px">资源描述：</label>
                        <textarea type="text" name="description" required id="description" class="layui-input"
                                  style="width: 200px;height: 55px"></textarea>
                    </div>
                </div>
                <div class="layui-form-item insertBox-right">
                    <div class="layui-input-block">
                        <button class="btn btn-success" type="submit">确定</button>
                    </div>
                </div>
            </form>
        </div>
    </div>


    <!--Begin core plugin -->
    <script src="${pageContext.request.contextPath}/assets/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/assets/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/assets/plugins/moment/moment.js"></script>
    <script src="${pageContext.request.contextPath}/assets/js/jquery.slimscroll.js "></script>
    <script src="${pageContext.request.contextPath}/assets/js/jquery.nicescroll.js"></script>
    <script src="${pageContext.request.contextPath}/assets/js/functions.js"></script>
    <!-- End core plugin -->

    <!--Begin Page Level Plugin-->
    <script src="${pageContext.request.contextPath}/assets/plugins/morris-chart/morris.js"></script>
    <script src="${pageContext.request.contextPath}/assets/plugins/morris-chart/raphael-min.js"></script>
    <script src="${pageContext.request.contextPath}/assets/plugins/jquery-sparkline/jquery.charts-sparkline.js"></script>
    <script src="${pageContext.request.contextPath}/assets/pages/dashboard.js"></script>
    <script src="${pageContext.request.contextPath}/assets/layui/layui.js"></script>
    <script>
        function resourceCategory() {
            location.href = "${pageContext.request.contextPath}/permissions/resourceCategory";
        }

        $("#clear").click(function () {
            $("#input1").val("");
            $("#input2").val("");
            $("#select1").val("");
        });

        $("#insert").click(function () {
            layer.open({
                type: 1,
                title: "添加资源",
                area: ['640px', '365px'],
                offset: ['200px', '550px'],
                content: $("#add-main").html()
            });
        });

        function updateResources(id) {
            $.post("${pageContext.request.contextPath}/permissions/findById", {id}, function (response) {
                $("#updateResourcesId").val(response.id);
                $("#nameS").val(response.name);
                $("#description").val(response.description);
                console.info(response.description);
                $("#urlS").val(response.url);
                f(response.categoryId);
                layer.open({
                    type: 1,
                    title: "修改资源",
                    area: ['640px', '365px'],
                    offset: ['200px', '550px'],
                    content: $("#edit-main")
                });
            })
        }

        function f(id) {
            $("#select3>option").each(function (i, j) {
                if (parseInt($(j).val()) === parseInt(id)) {
                    $(j).prop("selected", true);
                    return true;
                }
            })
        }

        $("#select_pageSize").bind("change", function () {
            let pageSize = $("#select_pageSize").val();
            let pageNum = $("#current").text();
            let name = $("#input1").val();
            let url = $("#input2").val();
            let categoryId = $("#select1").val();
            location.href = "${pageContext.request.contextPath}/permissions/resource/?pageNum=1&pageSize=" + pageSize
                + "&name=" + name + "&url=" + url + "&categoryId=" + categoryId;
        })
        $("#page").bind("change", function () {
            let pages = $("#cntpage").text();
            let pageSize = $("#select_pageSize").val();
            let name = $("#input1").val();
            let url = $("#input2").val();
            let categoryId = $("#select1").val();
            let pageNum = $("#page").val();
            console.info(pageNum);
            if (pageNum != null && pageNum != "" && pageNum <= pages) {
                location.href = "${pageContext.request.contextPath}/permissions/resource/?pageNum=" + pageNum + "&pageSize=" + pageSize
                    + "&name=" + name + "&url=" + url + "&categoryId=" + categoryId;
                ;
            } else {
                layer.open({
                    title: "警告！！！",
                    content: "不能为空或不能大于总页数！",
                    area: ['300px', '160px'],
                    offset: ['240px', '680px'],
                    yes: function (index, layero) {
                        layer.close(index);
                    }
                })
            }
        })

        function deleteResource(id) {
            layer.open({
                title: "删除提示！！！",
                content: "您确定要删除吗？",
                area: ['300px', '160px'],
                offset: ['240px', '680px'],
                yes: function (index, layero) {
                    location.href = "${pageContext.request.contextPath}/permissions/deleteResource/" + id;
                    layer.close(index);
                }
            })
        }
    </script>
</body>


</html>
